<template>
  <div>
    <!-- Header Area Starts -->
    <header class="header-area single-page">
      <div class="header-top">
        <div class="container">
          <div class="row">
            <div class="col-lg-2">
              <div class="logo-area">
                <router-link to="/"><img src="static/assets/images/logo-light.png" alt="logo"></router-link>
              </div>
            </div>
            <div class="col-lg-10">
              <div class="custom-navbar">
                <span></span>
                <span></span>
                <span></span>
              </div>
              <div class="main-menu main-menu-light">
                <ul>
                  <li class="active"><router-link to="/">主页</router-link></li>
                  <li><router-link to="/search">发现藏品</router-link></li>
                  <li><router-link to="/my">我的藏品</router-link></li>
                  <li><router-link to="/car">购物车</router-link></li>
                  <li><router-link to="/chat">联系商家</router-link></li>
                  <li class="menu-btn" v-if="isLogin==='' "style="">
<!--                    <router-link to="/login/1">登录</router-link>-->
                   <router-link to="/login"><a class="template-btn">Login In</a></router-link>
                  </li>
                  <li v-else>
                    <el-dropdown>
                      <img :src="rightUrl" alt="默认头像"  v-if="imageURL==='' " style="width: 50px;border-radius: 50%">
                      <img :src="imageURL" alt="用户头像"  v-else style="width:50px;border-radius: 50%">
                      <el-dropdown-menu slot="dropdown" >
                        <el-dropdown-item><router-link to="/myInfo">修改信息<i class=" iconfont icon-xuanzeqixiayige"></i></router-link></el-dropdown-item>
                        <el-dropdown-item ><div @click="loginout">退出登录<i class=" iconfont icon-xuanzeqixiayige"></i></div></el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </li>

                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-title text-center">
        <div class="container">
          <div class="row">
            <div class="col-md-6 offset-md-3">
              <h2>Campus Second-hand Platform</h2>
              <p>There is no idle goods in the world, only the merchant who will not use, more second-hand goods you will find</p>
            </div>
          </div>
        </div>
      </div>
    </header>

  </div>
</template>

<script>
import {getToken,removeToken} from '../../utils/token'
import {baseUrl,rightUrl} from '../../utils/Address'
export default {
  name: 'header',
  mounted () {
    this.userId = window.localStorage.getItem('userId')
    this.getAvatar()

  },
  data(){
    return{
      isLogin : getToken() || '',
      userId:'',
      imageURL:'',
      rightUrl
    }
  },
  methods:{
    loginout(){
      console.log(111)
      window.localStorage.removeItem('userId')
      removeToken()
      this.$router.go(0)
    },
    getAvatar() {
      if (this.userId !== '') {
        console.log(this.userId)
        this.axios.get(`${baseUrl}/user/userinfo/${this.userId}`).then(
          res => {
            console.log(res)
            this.imageURL = res.data.data.uimage
          }
        )
      }
    }
  }
}
</script>

<style scoped>

</style>
